<template>
  <div class="main">
    <span class="head"> 账号设置 / {{ showFunction }}</span>
    <div class="content">
      <div class="left">
        <div class="title">账号设置</div>
        <el-button @click="showInfo">资料展示</el-button>
        <el-button @click="showIdentify">身份认证</el-button>
        <el-button @click="showPhone">更换手机</el-button>
        <el-button @click="showEmail">更换邮箱</el-button>
        <el-button @click="showPassword">修改密码</el-button>
        <el-button @click="showForgetPassword">忘记密码</el-button>
      </div>
      <!-- 展示资料 -->
      <div class="right" v-show="editInfo">
        <div class="image">
          <div class="name">头像</div>
          <img class="img" src="../assets/img/logo.png" alt="" srcset="" />
          <div class="upload">
            <img class="imgUp" src="../assets/img/add.png" alt=" " srcset=" " style='padding-right:5px' />
            <span>上传头像</span>
          </div>
        </div>
        <div class="line">
          <div class="name">昵称</div>
          <div  style='display:inline-block;width:65%;'>
            <el-input placeholder="请输入昵称" v-model="nickname" clearable>
            </el-input>
          </div>
        </div>
        <div class="line">
          <div class="name">绑定手机号</div>
          <div class="fixNum">{{ phone }}</div>
        </div>
        <div class="line">
          <div class="name">绑定邮箱号</div>
          <div class="fixNum">{{ email }}</div>
        </div>
        <div class="line">
          <div class="name">个性签名</div>
         <div style='display:inline-block;width:65%;'>
            <el-input placeholder="一个好的个性签名将更展现独特魅力喔~" v-model="signature" clearable>
          </el-input>
         </div>
        </div>
        <div class="line">
          <div class="name"></div>
          <el-button type="primary" plain style="height: 45px" @click='preserveInfo'>保存</el-button>
        </div>
      </div>
      <!-- 身份认证 -->
      <div class="right" v-show="editIdentify">
        <div class="">
          <div class="tip" style="margin-bottom: 25px">
            认证成功后会增加贵公司的可信度喔～
          </div>
          <div class="long">
            <div>
              <span>公司：</span>
              <span style="color: #465156">{{ comName }}</span>
              <span>
                <img
                  class="alert"
                  src="../assets/img/alert.png"
                  alt=""
                  srcset=""
                />
                <span style="color: #465156; font-size: 17px">
                  认证失败(请通过提交营业执照正本或副本原件数码照进行认证)</span
                >
              </span>
            </div>
            <div>
              <el-link type="primary" @click='toEInformation'>立即认证</el-link>
            </div>
          </div>
        </div>
    
      </div>
      <!-- 更换手机 -->
      <div class="right" v-show="editPhone">
        <div class="tip">
          将手机号绑定至 当前账号后，原绑定的手机号1*****将无法登录喔～
        </div>
        <div class="line">
          <div class="name" style="margin-right: 0px">变更前:</div>
          <div class="fixNum">{{ phone }}</div>
        </div>
        <div class="line">
          <div class="name" style="margin-right: 0px">变更后:</div>

          <div class="inputBox">
            <el-input
              placeholder="请输入新的手机号"
              v-model="newPhone"
              clearable
            >
            </el-input>
          </div>
        </div>
        <div class="line">
          <div class="name" style="margin-right: 0px">验证码：</div>
          <div class="inputBox">
            <el-input placeholder="请输入验证码" v-model="nickname" clearable>
            </el-input>
          </div>
          <span class="verification"></span>
          <button class="send" v-if="showbtn" type="button" @click="sendEmail">
            获取邮箱验证码
          </button>
          <button class="send red" v-if="!showbtn" type="button">
            {{ sec }}
          </button>
        </div>
        <div class="line">
          <div class="name" style="margin-right: 0px"></div>
          <el-button type="primary" plain style="height: 45px" @click='submitPhone'>>提交</el-button>
        </div>
      </div>
      <!-- 变更邮箱 -->
      <div class="right" v-show="editEmail">
        <div class="tip">
          将邮箱绑定至当前账号后，原绑定的邮箱******.com将无法登录喔～
        </div>
        <div class="line">
          <div class="name" style="margin-right: 0px">变更前:</div>
          <div class="fixNum">{{ email }}</div>
        </div>
        <div class="line">
          <div class="name" style="margin-right: 0px">变更后:</div>

          <div class="inputBox">
            <el-input placeholder="请输入新的邮箱" v-model="newEmail" clearable>
            </el-input>
          </div>
        </div>
        <div class="line">
          <div class="name" style="margin-right: 0px">验证码：</div>
          <div class="inputBox">
            <el-input placeholder="请输入验证码" v-model="nickname" clearable>
            </el-input>
          </div>
          <span class="verification"></span>
          <button class="send" v-if="showbtn" type="button" @click="sendEmail">
            获取邮箱验证码
          </button>
          <button class="send red" v-if="!showbtn" type="button">
            {{ sec }}
          </button>
        </div>
        <div class="line">
          <div class="name" style="margin-right: 0px"></div>
          <el-button type="primary" plain style="height: 45px"  @click='submitEmail'>提交</el-button>
        </div>
      </div>
      <!-- 修改密码 -->
      <div class="right" v-show="editPassword">
        <div class="tip">更改密码后请记住您的新密码喔～</div>
        <div class="line">
          <div class="name" style="margin-right: 0px">旧密码:</div>
          <div class="inputBox">
            <el-input placeholder="请输入旧密码" v-model="newPassword" clearable>
            </el-input>
          </div>
        </div>
        <div class="line">
          <div class="name" style="margin-right: 0px">新密码：</div>

          <div class="inputBox">
            <el-input placeholder="请输入新的密码" v-model="newPassword" clearable>
            </el-input>
          </div>
        </div>
        <!-- <div class="line">
          <div class="name" style="margin-right: 0px">验证码：</div>
          <div class="inputBox">
            <el-input placeholder="请输入验证码" v-model="nickname" clearable>
            </el-input>
          </div>
          <span class="verification"></span>
          <button class="send" v-if="showbtn" type="button" @click="sendEmail">
            获取邮箱验证码
          </button>
          <button class="send red" v-if="!showbtn" type="button">
            {{ sec }}
          </button>
        </div> -->
        <div class="line">
          <div class="name" style="margin-right: 0px"></div>
          <el-button type="primary" plain style="height: 45px"  @click='submitPasswd'>提交</el-button>
        </div>
      </div>
      <!-- 忘记密码 -->
      <div class="right" v-show="editForgetPassword">
        <div class="tip">忘记密码需要通过邮箱验证才能找回喔～</div>

        <div class="line">
          <div class="name" style="margin-right: 0px">新密码：</div>

          <div class="inputBox">
            <el-input placeholder="请输入新的密码" v-model="newPassword" clearable>
            </el-input>
          </div>
        </div>
        <div class="line">
          <div class="name" style="margin-right: 0px">验证码：</div>
          <div class="inputBox">
            <el-input placeholder="请输入验证码" v-model="nickname" clearable>
            </el-input>
          </div>
          <span class="verification"></span>
          <button class="send" v-if="showbtn" type="button" @click="sendEmail">
            获取邮箱验证码
          </button>
          <button class="send red" v-if="!showbtn" type="button">
            {{ sec }}
          </button>
        </div>
        <div class="line">
          <div class="name" style="margin-right: 0px"></div>
          <el-button type="primary" plain style="height: 45px "  @click='submitForgetPasswd'>提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nickname: "",
      signature: "",
      phone: "12345678901",
      email: "12345qq.com",
    
      comName: "房地产有限公司",
      newPassword:'',
      newPhone:'',
      newEmail:'',



      // 验证码
      sec: "",
      editInfo: true,
      editIdentify: false,
      editEmail: false,
      editPhone: false,
      editPassword: false,
      showbtn: true,
      showFunction: "资料展示",
      editForgetPassword: false,
    };
  },
  methods: {
    showInfo() {
      this.editInfo = true;
      this.editIdentify = false;
      this.editEmail = false;
      this.editPhone = false;
      this.editPassword = false;
      this.editForgetPassword = false;
      this.showFunction = "资料展示";
    },
    showIdentify() {
      this.editInfo = false;
      this.editIdentify = true;
      this.editEmail = false;
      this.editPhone = false;
      this.edicPassword = false;
      this.editForgetPassword = false;
      this.showFunction = "身份认证";
    },
    showEmail() {
      this.editInfo = false;
      this.editIdentify = false;
      this.editEmail = true;
      this.editPhone = false;
      this.editPassword = false;
      this.editForgetPassword = false;
      this.showFunction = "修改邮箱";
    },
    showPhone() {
      this.editInfo = false;
      this.editIdentify = false;
      this.editEmail = false;
      this.editPhone = true;
      this.editPassword = false;
      this.editForgetPassword = false;
      this.showFunction = "修改手机";
    },
    showPassword() {
      this.editInfo = false;
      this.editIdentify = false;
      this.editEmail = false;
      this.editPhone = false;
      this.editPassword = true;
      this.editForgetPassword = false;
      this.showFunction = "修改密码";
    },
    showForgetPassword() {
      this.editInfo = false;
      this.editIdentify = false;
      this.editEmail = false;
      this.editPhone = false;
      this.editPassword = false;
      this.editForgetPassword = true;
      this.showFunction = "忘记密码";
    },
    preserveInfo() {

     },
    submitPhone() {

     },
    submitEmail() {

     },
    submitPasswd() {

     },

     submitForgetPasswd() {

     },
    async sendEmail() {
      try {
        const res = await this.$axios.post(`http://work.caike.online/user`, {
          action: "email",
          email: this.email,
        });
        console.log(res);
        const info = res.data;
        if (info.num != null) {
          this.code = info.num;
          this.showbtn = false;
          //时间间隔
          this.sec = 300;
          setInterval(() => {
            this.sec = this.sec - 1;
            if (this.sec == 0) {
              this.showbtn = true;
            }
          }, 1000);
        } else {
          this.$message({
            message: "验证码发送失败",
            type: "error",
            offset: 70,
          });
        }
      } catch (err) {
        this.$message({
          message: "发送失败,请刷新页面重试！",
          type: "error",
          offset: 70,
        });
        console.log(err);
      }
    },
    
toEInformation(){
 this.$router.push("/enterprise_information");
 

}
  },
};
</script>
<style lang='less' scope>
.main {
  /deep/ .el-button {
    margin-left: 0px;
    height: 15%;
    border-top: none;
  }
  display: inline-block;
  width: 100%;
  height: 100%;

  .head {
    display: flex;
    width: 100%;
    height: 10%;
    line-height: 450%;
    vertical-align: center;
    margin-left: 22%;
    // font-weight: 500;
    // color: #465156;
      color:rgb(80,110,155);
    // background:red;
  }
  .content {
    display: flex;
    margin-left: 20px;
    width: 100%;
    height: 84%;

    .left {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      height: 100%;
      width: 20%;
      margin-right: 10px;

      // background:black;
      .title {
        background: rgb(245, 248, 248);
        // background: rgba(80,110,155,0.5);
        display: inline-block;
        width: 100%;
        height: 20%;
        border-radius: 5px;
        text-align: center;
        letter-spacing: 2px;
        line-height: 104px;
        font-size: 18px;
        font-weight: 500;
      }
    }
    .right {
      // 设置内边距
      padding: 45px 0 0 45px;
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 80%;
      border: 1px solid #e7e9e9;
      border-radius: 5px;

      //    background:red;
      .tip {
        color: #465156;
      }
      .image {
        display: flex;
        width: 500px;
        line-height: 100px;

        padding-bottom: 20px;

        align-items: center;
        height: 100px;
        .img {
          background: #f0f1f1;
          width: 100px;
          height: 100px;
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
          border: 5px solid #fff;
          border-radius: 50%;
          margin: 0 20px;
        }
        .name {
          display: inline-block;
          width: 90px;
          margin-right: 50px;
        }
        .upload {
          display: inline-block;
          width: 127px;
          height: 38px;
          border-radius: 6px;
          border: 1px solid #f6f6f6;

          line-height: 38px;
          text-align: center;
          font-size: 16px;

          font-weight: 400;
          color: #82878f;
          cursor: pointer;
          .imgUp {
            display: inline-block;
            width: 23px;
            height: 20px;
            vertical-align: middle;
          }
        }
        .upload:hover {
          border: 1px solid rgba(167, 186, 238, 0.815);
          // background: rgba(122, 151, 231, 0.815);
           background:#ECF5FF;
        }
        .inputBox {
          display: inline-block;
          width:420px;
        }
      }
      .line {
        display: flex;
        height: 70px;
        width: 500px;
        align-items: center;
        .name {
          display: inline-block;
          margin-right: 30px;
          width: 90px;
        }
        .fixNum {
          color: #82878f;
        }

        .send {
          display: inline-block;
          height: 38px;
          width: 110px;
          margin: 5px;
          margin-right: 0px;
          border: none;
          outline: none;
          font-size: 8px;
          color: #fff;
          background: #0e67db73;
          padding: 10px 10px;
          /* test-align: center; */
          cursor: pointer;
          /*光标呈现为指示链接的指针（一只手）*/
          border-radius: 10px;
        }
        .red {
          cursor: none;
          background-color: rgba(255, 0, 0, 0.514);
        }
      }
      .long {
        display: flex;
        justify-content: space-between;
        width: 90%;
        height: 70px;
        .alert {
          display: inline-block;
          margin-left: 5px;
          margin-right: 5px;
          width: 23px;
          height: 23px;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>